<template>
    <div class="auth-wrapper">
        <div class="auth-content">
            <div class="header-container mb-6">
                <img :src="logoUrl" alt="Logo" class="logo mb-3" />
                <div class="title-container mb-2">
                    <h2 class="fw-bold m-0">
                        <slot name="title" />
                    </h2>
                    <p class="text-muted small m-0 mt-1">
                        <slot name="subtitle" />
                    </p>
                </div>
            </div>
            <slot />
        </div>
    </div>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useThemeStore } from '../store/theme';

const theme = useThemeStore();
const defaultAvatar = new URL('../assets/imgs/默认头像.png', import.meta.url).href;
const logoUrl = computed(() =>
    theme.dark ? defaultAvatar : defaultAvatar
);

// 监听主题变化，自动更新 html 属性
watch(
    () => theme.dark,
    val => {
        document.documentElement.setAttribute('data-bs-theme', val ? 'dark' : 'light');
    },
    { immediate: true }
);
</script>

<style scoped>
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem 1rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.auth-content {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    margin: 0;
}

.title-container {
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

/* 移除旧的 .text-center 类样式（如果有） */
.text-center {
    text-align: left;
}
</style>
